<template>
  <div>
    <!-- 占位置 -->
    <!-- 登陆 框 -->
    <div class="box-login">
      <p class="zwf"></p>
      <!-- 图片和表单 -->
      <div class="lagin-body">
        <div class="lagin-head">
          <img
            class="icons"
            src="/img/icons/android-chrome-192x192.png"
            alt=""
          />
        </div>
        <div class="fam">
          <!-- 账号 -->
          <el-input
            v-model="userdata.username"
            placeholder="请输入账号"
          ></el-input>
          <p></p>
          <!-- 密码 -->
          <el-input
            v-model="userdata.password"
            type="password"
            placeholder="请输入密码"
          ></el-input>
          <p></p>
          <!-- 登陆 -->
          <el-button type="success" @click="login">登陆</el-button>
          <!-- 重置数据 -->
          <el-button type="info" @click="init">重置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  //判断是否登陆
  beforeRouteEnter(to, from, next) {
    // ...

    let token = sessionStorage.getItem("token");
    //有 则放行
    if (token == null) {
      next();
    } // 如果没有token则
    next("/home");
  },
  data() {
    return {
      userdata: {
        //用户数据合集
        username: "admin",
        password: "123456",
      },
    };
  },
  methods: {
    //   登陆
    login() {
      this.$axios
        .post(
          "https://www.liulongbin.top:8888/api/private/v1/login",
          this.userdata
        )
        .then((rem) => {
          // 获取成功回调
          if (rem.meta.status == "200") {
            //   提示消息
            this.$message.success(rem.meta.msg);
            // 储存token
            sessionStorage.setItem("token", rem.data.token);

            this.$router.push("/home"); // 跳转首页
          }
          if (rem.meta.status != "200") {
            //   错误提示消息
            this.$message.error(rem.meta.msg);
          }
        })
        // 失败回调
        .catch((error) => {
          // 提示
          this.$message.warning("当前网络状态不佳，请稍后在试");
        });
    },
    init() {
      // 重置
      (this.userdata.username = ""), (this.userdata.password = "");
    },
  },
};
</script>
<style scoped>
.box-login {
  padding-top: 9%;
  text-align: center;
  height: 659px;
  padding-bottom: 70px;
  width: 100%;
  background: #2b4b6b;
  margin: 0;
}
.lagin-body {
  margin: auto;
  text-align: center;
  width: 500px;
  height: 353px;
  background: #f4f5f6;
}
.lagin-head {
  width: 150px;
  height: 150px;
  background: #ffffff;
  position: relative;
  bottom: 29%;
  left: 1%;
  border: #000 1px solid;
  border-radius: 70%;
  margin: auto;
  padding: 20px;
}
.zwf {
  width: 100%;
  height: 16%;
  margin: 0;
}
.icons {
  border-radius: 20%;
  width: 97%;
  height: 97%;
}
.fam {
  width: 70%;
  position: relative;
  left: 15%;
  bottom: 20%;
}
</style>